<script>
  let scoops = 1;
  let flavours = ['蛋糕'];

  function join(flavours) {
    if (flavours.length === 1) return flavours[0];
    return `${flavours.slice(0, -1).join(', ')} 和 ${flavours[flavours.length - 1]}`;
  }
</script>

<h2>数量</h2>

<label><input type=radio bind:group={scoops} value={1}>1种</label>
<label><input type=radio bind:group={scoops} value={2}>2种</label>
<label><input type=radio bind:group={scoops} value={3}>3种</label>

<h2>零食</h2>

<label>
  <input type=checkbox bind:group={flavours} value="蛋糕">蛋糕
</label>
<label>
  <input type=checkbox bind:group={flavours} value="可乐">可乐
</label>
<label>
  <input type=checkbox bind:group={flavours} value="水果">水果
</label>

{#if flavours.length === 0}
  <p>至少选择一种零食</p>
{:else if flavours.length > scoops}
  <p>选择不能超过上面的数量</p>
{:else}
  <p>
    你预定了 {scoops} {scoops === 1 ? '种零食' : '种零食们'}： {join(flavours)}
  </p>
{/if}
